<template>
  <div class="lockWrap h100">
    <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
    <!-- 占用基本信息 -->
    <div class="lockTop">
      <div class="descRow">
        <!-- 车辆版本 -->
        <div class="descItem">
          <span class="descTitle">{{ $t('vehicleVersion') }}</span>
          <div class="descValue">
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="baseInfo.strategyVer || '-'"></table-ellipsis>
          </div>
        </div>
        <!-- 版本批次号 -->
        <div class="descItem">
          <span class="descTitle">{{ $t('versionBatchNo') }}</span>
          <div class="descValue">
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="baseInfo.batchId || '-'"></table-ellipsis>
          </div>
        </div>
        <!-- 占用开始时间 -->
        <div class="descItem">
          <span class="descTitle">{{ $t('occupyStartTime') }}</span>
          <div class="descValue">
            <table-ellipsis
              :tableEllipsisIsTurnLine="false"
              :text="$commonFun.getDateTimeStr(baseInfo.clientTime) || '-'"
            ></table-ellipsis>
          </div>
        </div>
      </div>
    </div>
    <!-- 占用列表 -->
    <div class="lockList">
      <s-table
        :columns="columns"
        :data-source="lists"
        :showPagination="false"
        :scrollX="900"
        :rowKey="(record, index) => index"
        ref="table"
        class="h100"
      >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import { lockTbColumns } from './config/list'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import vehicleApi from '@/api/modules/system/vehicleMana'
// 初始化基本信息
const initBaseInfo = {
  // 占用开始时间即是客户端时间
  clientTime: '',
  // 版本批次号
  batchId: '',
  // 整车版本
  strategyVer: ''
}
export default {
  components: {
    STable,
    FullParentDomWithDask,
    TableEllipsis
  },
  props: {
    vehicleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      columns: lockTbColumns,
      lists: [],
      loading: false,
      baseInfo: {
        ...initBaseInfo
      }
    }
  },
  computed: {
    commonColumns () {
      return lockTbColumns.filter((item) => !item.special)
    }
  },
  created () {
    console.log('lock')
    this.initData()
  },
  methods: {
    initData () {
      this.resetData()
      this.getData()
    },
    getData () {
      this.loading = true
      vehicleApi
        .getVehicleLockInfo({ vehicleId: this.vehicleId })
        .then((res) => {
          if (res.data) {
            const { data } = res
            this.lists = data.strategy ? data.strategy.targetPackageInfo : []
            this.baseInfo.clientTime = data.acceptTime
            this.baseInfo.batchId = data.strategy ? data.strategy.batchId : ''
            this.baseInfo.strategyVer = data.strategy ? data.strategy.strategyVer : ''
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    resetData () {
      this.baseInfo = {
        ...initBaseInfo
      }
      this.lists = []
    },
    calcTbodyHeight () {
      if (this.$refs.table) {
        this.$nextTick(() => {
          this.$refs.table.getDomHeight()
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.lockWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  .lockTop {
    flex: none;
    .descRow {
      display: flex;
      justify-content: space-between;
      .descItem {
        display: flex;
        // max-width: 32%;
      }
      .descTitle {
        flex: none;
        margin-right: 16px;
        font-weight: 600;
      }
      .descValue {
        flex: 1 0 0;
        overflow: hidden;
      }
    }
    margin-bottom: 16px;
  }
  .lockList {
    flex: 1 0 0;
  }
}
</style>
